<template>
  <div class="abc">
    <el-upload
      :action="baseUrl"
      list-type="picture-card"
      :data="dataObj"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleImageSuccess"
      :multiple="isMultiple"
      :file-list="fileList"
      :show-file-list="true"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MultiImage',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isMultiple: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      baseUrl: process.env.VUE_APP_BASE_API + '/api/upload',
      dataObj: { token: '', key: '' }
    };
  },
  computed: {
    fileList: function() {
      if (this.value) {
        this.value.forEach(item => { item.url = !item.url.includes("http") && item.url.includes("data") ? `${this.url}/` + item.url : item.url })
        return this.value
      } else {
        return []
      }
    }
  },
  methods: {
    handleRemove(res) {
      const _index = this.value.indexOf(res)
      this.value.splice(_index, 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleImageSuccess(res, file) {
      this.value.push({name: file.name, url: res.data.url, uid: file.uid})
    }
  }
}
</script>
